<template>
	<view class="wrap">
		<view class="list">
			<template v-if="list.length > 0">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="item-h flex">
						<view class="name">{{item.ExhibitionhallName}}</view>
						<view class="status">{{item.statestr}}</view>
						<view class="flex" @click="handlepage(item.ID)">
							<view class="text">全部仪式</view>
							<view class="iconfont icon-youjiantou"></view>
						</view>
					</view>
					<template v-if="item.Ceremonytheme || item?.JinriCeremonyOrders?.length">
						<view class="item-content act" @click="handleDetail(item)" v-if="item.Ceremonytheme">
							<view class="title">当前仪式</view>

							<view class="ys-name">{{item.Ceremonytheme}}</view>
							<view class="ys-detail">
								<view class="comzh">时间：{{item.ftime}}</view>
								<view class="comzh">模版： {{item.TemplateName || '--'}}</view>
								<view class="comzh">操作者： {{item.Creator}}</view>
							</view>

							<view class="ys-btn" @click.stop="overLy(item.ID)">结束礼仪</view>
						</view>
						<view class="item-content" :class="{act:v.state==2}" v-for="(v,l) in item.JinriCeremonyOrders"
							@click="handleDetail(v)" :key="l">
							<view class="ys-name">{{v.Ceremonytheme}}</view>
							<view class="ys-detail">
								<view class="comzh">时间：{{v.ftime}}</view>
								<view class="comzh">模版： {{v.TemplateName || '--'}}</view>
								<view class="comzh">操作者： {{v.Creator}}</view>
							</view>

							<!-- <view class="ys-btn" @click.stop="overLy(v.ID)" v-if="v.state==2">结束礼仪</view> -->
						</view>
					</template>
					<view class="item-content no-data" v-else>
						<view class="title">暂无仪式</view>
					</view>
				</view>
			</template>
			<view class="no-data" v-else>
				<view class="title" v-slot="y">暂无仪式</view>
			</view>
		</view>

		<up-modal :show="show" title="提示" content='是否结束礼仪' :showCancelButton="true" @cancel="cancel"
			@confirm="confirm"></up-modal>
	</view>
</template>
<script setup>
	import {
		random,
		guid
	} from '@/uni_modules/uview-plus'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		request
	} from '@/utils/request.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import keyboard from '../../uni_modules/uview-plus/libs/config/props/keyboard';

	const show = ref(false)

	const list = ref([])

	const currid = ref('') // 展厅ID



	const handlepage = (zid) => {
		const app = getApp();
		console.log('app', app)
		app.globalData.zid = zid || {}; // 确保globalData存在
		uni.switchTab({
			url: '/pages/yishi/yishi'
		})
	}


	// {
	//    "ID": 1,                         //展厅ID
	//    "ExhibitionhallName": "深圳展厅",  //名称
	//    "bgImg": "Upload/Tables/SZ_ChannelExhibitionHall/202409171533505353/3.jpg", //展厅背景图
	//    "state": 1,                      //状态1禁用中、2使用中、3空闲
	//    "statestr": "禁用中",             //状态描述 禁用中、使用中、空闲
	//    "SYcount": 0,
	//    "CeremonyOrdersID": 6,                //礼仪单ID
	//    "Ceremonytheme": "深圳仪式主题02",  //仪式主题名称
	//    "StartTime": "2024-09-28 12:00:00",     //开始时间
	//    "EndTime": "2024-09-28 21:00:00",      //结束时间
	//    "Creator": "超级管理员",              //操作者
	//    "TemplateName": "通用模版"          //模板名称
	//  }

	const getCeremonyTemplateList = async () => {
		try {

			const res = await request({
				method: 'GET',
				url: '/SZ_ChannelExhibitionHall/GetExhibitionhallList'
			})
			// res.Data[2].JinriCeremonyOrders.push({
			// 	CeremonyOrdersID: 30,
			// 	Ceremonytheme: "深圳仪式主题01",
			// 	Creator: "深圳999",
			// 	EndTime: "2024-11-28 23:30:00",
			// 	StartTime: "2024-10-28 10:30:00",
			// 	TemplateName: "通用模版",
			// 	ftime: "2024-10-28 10:30:00-23:30:00"
			// })
			list.value = res.Data?.map(v => {
				let ftime = '';
				let vtime = ''
				if (v.JinriCeremonyOrders?.length) {
					v.JinriCeremonyOrders = v.JinriCeremonyOrders.map((k, l) => {
						if (k.StartTime && k.EndTime) {
							const stime = k.StartTime?.split(' ')
							const etime = k.EndTime?.split(' ')
							ftime = `${stime?.[0]} ${stime?.[1]}-${etime?.[1]}`
						}
						if (v.Ceremonytheme == k.Ceremonytheme) {
							k.state = 2
						} else {
							k.state = 1
						}
						return {
							...k,
							ftime
						}
					})
				}

				if (v.StartTime && v.EndTime) {
					const stime = v.StartTime?.split(' ')
					const etime = v.EndTime?.split(' ')
					vtime = `${stime?.[0]} ${stime?.[1]}-${etime?.[1]}`
				}

				return {
					...v,
					ftime: vtime
				}
			})
			console.log('list.value', list.value)
		} catch (e) {
			//TODO handle the exception
		}
	}


	const setTempletefn = async (cid, tid, zid) => {
		if (!tid) return false;
		const res = await request({
			method: 'GET',
			url: '/SZ_CeremonyTemplate/SetTemplateID',
			data: {
				ChannelExhibitionHallID: zid,
				CeremonyOrdersID: cid,
				TemplateID: tid
			}
		})
		return true
	}



	const overLy = async (id) => {
		show.value = true;
		currid.value = id;

	}
	// 跳转到具体仪式详情
	const handleDetail = (res) => {
		// pages/yishi/detail?id=27
		const cid = res.CeremonyOrdersID
		uni.navigateTo({
			url: '/pages/yishi/detail?id=' + cid
		})
	}

	// 方法
	const showModal = () => {
		show.value = true;
	};

	const confirm = async () => {
		show.value = false;

		// const res = await request({
		// 	method: 'GET',
		// 	url: '/SZ_ChannelExhibitionHall/UpdateCeremonyOrders',
		// 	data: {
		// 		ID: currid.value
		// 	}
		//})
		const flag = await setTempletefn(currid.value, -2, currid.value);
		if (!flag) return;
		uni.$u.toast('结束礼仪成功')
		getCeremonyTemplateList()
		// if (res.Status) {
		// 	uni.$u.toast('结束礼仪成功')
		// 	getCeremonyTemplateList()
		// } else {
		// 	uni.$u.toast(res.Message)
		// }
	};

	const cancel = () => {
		show.value = false;
	};
	onShow(() => {
		getCeremonyTemplateList()
	})
</script>


<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx;

		.list {
			padding-bottom: 90rpx;
		}

	}

	.item {
		margin-bottom: 40rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 20rpx;
		filter: drop-shadow(0 10rpx 10rpx rgba(0, 0, 0, 0.3));
	}

	.item-h {
		padding: 0 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		justify-content: space-between;
		font-size: 28rpx;
		color: #fff;
		background-color: $base-bg;
		border-radius: 20rpx;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;

		.iconfont {
			margin-left: 4rpx;
			font-size: 30rpx;
		}
	}

	.item-content {
		position: relative;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #dedede;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		color: #646464;

		&.item-xm {
			margin-bottom: 20rpx;

		}

		&.act {
			color: #fff;
			background-color: $base-bg;
		}

		&.no-data {
			color: $base-color;
			background-color: #fff;
		}

		.title {
			text-align: center;
		}

		.ys-name {
			padding: 20rpx 0;
		}

		.comzh {
			padding: 10rpx 0;
		}

		.ys-btn {
			position: absolute;
			right: 20rpx;
			top: 20%;
			width: 160rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			font-size: 28rpx;
			color: #666;
			background-color: #dedede;
			border-radius: 4rpx;
		}
	}
</style>